<template>
	<div class="zhy-image">
		<el-image :style="{ width, height }" :src="imgUrl" :zoom-rate="zoomRate" :preview-src-list="previewImgUrl" :fit="fit">
			<template #error>
				<div class="w100 h100">
					<img class="w100 defualt-img" :src="userDefault" />
				</div>
			</template>
		</el-image>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { GlobalStore } from '@/stores';
import { PORT3 } from '@/api/config/servicePort';
import userDefault from '@/assets/images/userDefault.png';
const globalStore = GlobalStore();
const sysParams = globalStore.sysParamsGet;
const token = globalStore.userToken;

type ImageFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
interface ImageProps {
	width?: string;
	height?: string;
	zoomRate?: number; // 缩放事件的缩放速度
	url: string | undefined; // 图片路径或者人员编码
	fit?: ImageFit; // 确定图片如何适应容器框
	lazy?: boolean; // 是否使用懒加载
	isPsnTmplNo?: boolean; // 是否使用人员编码
	faceCrteTmplType?: string; // 其他组件传过来的参数
	isPreviewImg?: boolean; // 是否开启预览
}

// 默认值
const props = withDefaults(defineProps<ImageProps>(), {
	width: '64px',
	height: '64px',
	zoomRate: 1.2,
	lazy: true,
	fit: 'cover',
	isPsnTmplNo: false,
	faceCrteTmplType: '',
	isPreviewImg: true
});

// 路径
const imgUrl = computed(() => {
	let imgUrl: string = '';
	// 是否有水印图片
	if (sysParams?.watermark) {
		// 是否通过人员编码获取图片
		if (props.isPsnTmplNo) {
			imgUrl = `${PORT3}bosg/download/${props.url}?watermark=${sysParams.watermark}&isWatermark=true&faceCrteTmplType=${props.faceCrteTmplType}&_csrf=${token}`;
		} else {
			// 如果地址中带有token
			if (props.url && props.url.includes('?_csrf')) {
				imgUrl = `${PORT3}file/download/${props.url}?watermark=${sysParams.watermark}&isWatermark=true`;
			} else {
				imgUrl = `${PORT3}file/download/${props.url}?watermark=${sysParams.watermark}&isWatermark=true&_csrf=${token}`;
			}
		}
	} else {
		if (props.isPsnTmplNo) {
			imgUrl = `${PORT3}bosg/download/${props.url}?&faceCrteTmplType${props.faceCrteTmplType}&_csrf=${token}`;
		} else {
			imgUrl = `${PORT3}file/download/${props.url}?_csrf=${token}`;
		}
	}
	return imgUrl;
});

// 预览
const previewImgUrl = computed(() => {
	if (!props.isPreviewImg) {
		return [];
	}
	return [imgUrl.value];
});
</script>

<style scoped lang="scss">
.defualt-img {
	object-fit: contain;
	height: 100%;
}
</style>
